{{#if service.isShowingModal}}
  {{#notifications/dialog/confirm-dialog
    dismissButtonText=service.modal.props.dismissButtonText
    confirmButtonText=service.modal.props.confirmButtonText
    toggleText=service.modal.props.toggleText
    onDialogToggle=(action service.modal.props.onDialogToggle target=service)
    onConfirm=(action 'confirmModal' target=service)
    onClose=(action 'dismissModal' target=service) as |dialog|}}
    {{dialog.header header=service.modal.props.header}}

    {{dialog.content content=service.modal.props.content}}

    {{dialog.footer}}
  {{/notifications/dialog/confirm-dialog}}
{{/if}}


{{#if service.isShowingToast}}
  <div class="notification-toast">
    <i class="notification-toast__icon"></i>

    <div class="notification-toast__content notification-toast__content--{{service.toast.props.type}}">
      <p class="notification-toast__content__msg">
        {{split-text service.toast.props.content 120}}
      </p>

      {{#if (gt service.toast.props.content.length 120)}}
        <button
          class="nacho-button nacho-button--tertiary notification-toast__content-detail"
          onclick={{action "showContentDetail" target=service}}>
          See Detail
        </button>
      {{/if}}
    </div>

    <button class="notification-toast__dismiss" onclick={{action "dismissToast" target=service}}>
      <span class="sr-only">{{service.toast.props.dismissButtonText}}</span>
      &times;
    </button>

  </div>
{{/if}}

{{yield}}
